<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/public.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
</head>

<body class="bg">
	<div class="header-top">
		<div class="content">
			<img src="../../static/icon.png" class="icon">
			<div class="title-bar">
				<div class="box-one">探索老师</div>
				<div class="box-two">问个问题</div>
			</div>
		</div>
		<div class="content">
			<i class="iconfont icon-xinxi" style="font-size: 30px;color: #BDBDBD;"></i>
			<div class="title-right-bar">
				<span>中文</span>
				<span>USD</span>
				<i class="iconfont icon-xiang-zuo ic"
					style="margin-left: 9px;padding: 0 16px;font-size: 30px;color: #BDBDBD;transform: rotate(270deg) scale(0.6);"></i>
				<div class="select-lang">
					<div>
						<h3>语言</h3>
						<select name="">
							<option value=" ">中文</option>
							<option value="实验1">英文</option>
							<option value="实验2">德语</option>
						</select>
					</div>
					<div>
						<h3>货币</h3>
						<select>
							<option value="volvo">USD</option>
							<option value="saab">USD</option>
						</select>
					</div>
				</div>
			</div>
			<i class="iconfont icon-denglu1" style="font-size: 20px;color: #BDBDBD;margin-left: 16px;"></i>
			<span>登录</span>
		</div>
	</div>
	<div class="global-class">
		<div class="main-q">
			<h2>询问准备的导师</h2>
			<div class="boxs">
				<div class="tes">
					<strong>辅导科目</strong>
					<div class="ipts" style="display: flex;flex: 1;align-items: center;background-color: #F2F2F2;">
						<div class="select-custom">
							<strong class="nr" id="content">test</strong>
							<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
						</div>
					</div>
				</div>
			</div>
			<div class="boxs">
				<!-- 用于占位 -->
				<strong></strong>
				<!-- 用于占位 -->
				<div class="items" id="first">
					<strong class="items-btm">1</strong>
					<strong class="items-btm">2</strong>
					<strong class="items-btm">3</strong>
					<strong class="items-btm">4</strong>
				</div>
			</div>
			<div class="boxs">
				<strong>标题</strong>
				<input type="text" name="" id="title" value="" required="required" autocomplete="off" class="input-set"
					placeholder="商务英语" />
			</div>
			<div class="boxs">
				<strong>要求</strong>
				<textarea rows="" cols="" id="ask" required="required" autocomplete="off" class="t-area"></textarea>
			</div>
			<div class="boxs">
				<strong>你的名字</strong>
				<input type="text" name="" id="user" required="required" autocomplete="off" value=""
					class="input-set" />
			</div>
			<div class="boxs">
				<strong>电子邮箱</strong>
				<input type="email" name="" id="email" value="" autocomplete="off" class="input-set" />
			</div>
			<button class="btn">提交</button>
		</div>
		<div class="aside">
			<img src="../../static/person.png" class="person">
			<div class="flex-content">
				<div class="grid-set">
					<h1>80%问题在30分钟内得到解答</h1>
				</div>
				<div>
					<div class="seting-text">
						<i class="iconfont icon-dengpao size-set"></i>
						<strong>向15000多名专家导师学习</strong>
					</div>
					<div class="seting-text">
						<i class="iconfont icon-dengpao size-set"></i>
						<strong>探索您主题中常见问题和答案</strong>
					</div>
					<div class="seting-text">
						<i class="iconfont icon-dengpao size-set"></i>
						<strong>免费获得有用的见解</strong>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script src="../../js/dream-msg.min.js"></script>
<script type="text/javascript">
	// 下拉框
	downout();
	// 生成页尾
	productfooter('body', 4);

	// 接口提交
	$('.btn').click(async function () {
		if (!$('#content').html()) {
			Dreamer.warning('请选择科目');
		} else if (!$('#title').val()) {
			Dreamer.warning('请输入标题');
		} else if (!$('#ask').val()) {
			Dreamer.warning('请输入要求');
		} else if (!$('#user').val()) {
			Dreamer.warning('请输入名字');
		} else if (!emailtest($('#email').val())) {
			Dreamer.warning('请输入正确的邮箱!');
		} else {
			let params = {
				project: $('#content').html(),
				title: $('#title').val(),
				ask: $('#ask').val(),
				user: $('#user').val(),
				email: $('#email').val(),
			}
			let res = await ajax('', params, '');
			if (res.code == 200) {
				Dreamer.info('提交成功', 2000);
			} else {
				Dreamer.error('提交失败', 2000);
			}
		}
	})

	$(document).ready(function () {
		$('#first').hide();
		$('.icon-xinxi').hide();
	})

	$('.box-one').click(function () {
		window.location.href = '/views/teacher/teachers.html'
	})
	$('.box-two').click(function () {
		window.location.href = '/views/question/question.html';
	})



	// 切换
	function change(area, icon) {
		if ($('#' + icon).hasClass('ic-select-active')) {
			$('#' + icon).removeClass('ic-select-active');
			$('#' + icon).addClass('ic-select');
			$('#' + area).slideToggle("slow");
		} else {
			$('#' + icon).removeClass('ic-select');
			$('#' + icon).addClass('ic-select-active');
			$('#' + area).slideToggle("slow");
		}
	}
	// 选择框切换
	$('.ipts').click(function () {
		change('first', 'ele');
	})

	$('.items-btm').each(function () {
		$(this).click(function () {
			$("#content").html($(this).html());
			$('#ele').removeClass('ic-select-active');
			$('#ele').addClass('ic-select');
			$('#first').slideToggle("slow");
		})
	})

</script>
<style type="text/css">
	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.box-one {
		white-space: nowrap;
		width: auto;
		padding: 5px;
		background-color: #3BB3BD;
		border-radius: 3px;
		color: #fff;
		margin-left: 16px;
		cursor: pointer;
	}

	.box-two {
		margin-left: 16px;
		white-space: nowrap;
		width: auto;
		padding: 4px;
		border: 1px solid #3BB3BD;
		border-radius: 3px;
		color: #3BB3BD;
		cursor: pointer;
	}

	.main-q {
		background-color: #fff;
		margin-left: 15%;
		width: 40%;
		padding: 3% 5% 5% 5%;
		box-shadow: rgba(201, 201, 201, 0.5);
		0px 0px 1px 2px;
		border-radius: 6px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}

	.main-q>h2 {
		font-size: 24px;
		font-size: bold;
		color: #000000;
		padding-bottom: 38px;
	}

	.input-set {
		flex: 1;
		height: 30px;
		background-color: #F8F8F8;
		outline: none;
		border: none;
		border-radius: 6px;
		padding-left: 15px;
	}

	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #868A8E;
		font-weight: bold;
		/* placeholder字体大小  */
		font-size: 14px;
		/* placeholder位置  */
	}

	.boxs {
		margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.boxs-special {
		margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;

	}

	.boxs>strong {
		width: 10%;
		white-space: nowrap;
		color: #b4b4b4;
		font-size: 14px;
		padding-right: 16px;
	}

	.boxs textarea {
		flex: 1;
		min-height: 80px;
		max-height: 120px;
		background-color: #F8F8F8;
		border-radius: 6px;
		resize: none;
		outline: none;
		border: none;
		padding-top: 15px;
		padding-left: 15px;
	}

	.btn {
		box-shadow: 0px 2px 6px 0px rgba(154, 120, 38, 0.5);
		width: 30%;
		color: #fff;
		padding: 12px 0;
		margin-top: 30px;
		background-color: #FAC443;
		border: none;
		border-radius: 6px;
		align-self: center;
	}

	/* 选中框 */
	.tes {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.tes strong {
		width: 10%;
		white-space: nowrap;
		color: #b4b4b4;
		font-size: 14px;
		padding-right: 16px;
	}

	.title {
		width: 60px;
		text-align: right;
		white-space: nowrap;
	}

	.items {
		width: 90%;
		background-color: #F2F2F2;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
	}

	.nr {
		width: 100%;
		padding: 8px 0;
		color: #a5a5a5;
	}

	.items-btm {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 8px 0;
		border-bottom: 1px solid #E6E6E6;
		color: #a5a5a5;
		cursor: pointer;
	}

	.select-custom {
		flex: 1;
		background-color: #F2F2F2;
		border-radius: 6px;
		display: flex;
		align-items: center;
		margin-left: 16px;
		position: relative;
	}

	.ic-select {
		display: flex;
		justify-content: center;
		margin-left: 9px;
		font-size: 30px;
		color: #BDBDBD;
		transform: rotate(270deg) scale(0.6);
		position: absolute;
		right: 0px;
		transition: transform 0.5s ease-in;
	}

	.ic-select-active {
		display: flex;
		justify-content: center;
		margin-left: 9px;
		font-size: 30px;
		color: #BDBDBD;
		transform: rotate(450deg) scale(0.6);
		position: absolute;
		right: 0px;
		transition: transform 0.5s ease-in;
	}

	.aside {
		margin: 5%;
		width: 15%;
		border-radius: 6px;
		background-color: #fff;
		padding: 3% 0;
		box-shadow: rgba(201, 201, 201, 0.5);
		0px 0px 1px 2px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.person {
		height: 130px;
		position: absolute;
		top: -90px;
	}

	.flex-content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.grid-set {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 5px;
	}

	.grid-set>h1 {
		text-align: center;
		width: 60%;
		font-size: 18px;
		color: #000000;

	}

	.global-class {
		display: flex;
		width: 100%;
		height: auto;
		padding: 30px 0 85px 0;
		align-items: center;
	}

	.seting-text {
		margin-top: 20px;
		display: flex;
		color: #3C3C3C;
		font-size: 14px;
	}

	.seting-text strong {
		margin-left: 10px;
	}

	.size-set {
		color: #fac443;
		font-size: 18px
	}

	#a-flex {
		display: flex;
		align-items: center;
	}

	#a-flex>span {
		margin-left: 8px;
	}
</style>